<template>
  <div class="left-side" v-show="catalogue.length > 0">
    <div class="side-wrapper" v-for="pItem in catalogue" :key="pItem.pId">
      <div class="back000">
        <div class="side-title">
          <div class="title000"></div>
          <el-icon class="icon"><component :is="pItem.icon" /></el-icon>&#160;
          {{ pItem.pName }}
        </div>
        <!-- <hr> -->
        <div class="side-menu">
          <router-link
            v-for="item in pItem.name"
            :key="item.id"
            active-class="active"
            :to="item.to"
          >
            <img :src="item.imageUrl" />
            {{ item.name }}
          </router-link>
        </div>
        <div class="bottom"></div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  Histogram,
  TrendCharts,
  Ticket,
  Comment,
  BellFilled,
} from "@element-plus/icons-vue";
export default {
  data() {
    return {
      catalogue: [
        {
          pId: 1,
          pName: "数据大盘",
          name: [
            { id: 1, imageUrl: "", name: "行业大盘", to: "/card/userCard" },
            { id: 2, imageUrl: "", name: "票房大盘", to: "/card/profileCard" },
            { id: 3, imageUrl: "", name: "排片大盘", to: "/card/newsCard" },
          ],
          icon: Histogram,
        },
        {
          pId: 2,
          pName: "票房分析",
          name: [
            {
              id: 1,
              imageUrl: "",
              name: "票房榜",
              to: "/beautiful/catButterfly",
            },
            { id: 2, imageUrl: "", name: "影片票房", to: "/beautiful/dogRose" },
            {
              id: 3,
              imageUrl: "",
              name: "影院票房",
              to: "/beautiful/greenEyesCat",
            },
            {
              id: 4,
              imageUrl: "",
              name: "地区票房",
              to: "/beautiful/areaTicket",
            },
            {
              id: 5,
              imageUrl: "",
              name: "院线票房",
              to: "/beautiful/theaterTicket",
            },
          ],
          icon: TrendCharts,
        },
        {
          pId: 3,
          pName: "排片分析",
          name: [
            {
              id: 1,
              imageUrl: "",
              name: "影片排片",
              to: "/arrange/arrangement",
            },
          ],
          icon: Ticket,
        },
        {
          pId: 4,
          pName: "宣发舆情",
          name: [
            {
              id: 1,
              imageUrl: "",
              name: "口碑指数",
              to: "/disccuss/disThreeView",
            },
            {
              id: 2,
              imageUrl: "",
              name: "热门资讯",
              to: "/disccuss/disOneView",
            },
          ],
          icon: Comment,
        },
        {
          pId: 5,
          pName: "情报",
          name: [
            { id: 1, imageUrl: "", name: "发行情报", to: "/info/infomation" },
            { id: 2, imageUrl: "", name: "备案公司", to: "/info/companyinfo" },
          ],
          icon: BellFilled,
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
// .back000 {
//   background-color: #fff;
//   width: 204px;
//   margin-left: -20px;
//   margin-top: -24px;
//   border-radius: 2%;
// }
// .title000{
//   height: 10px;
// }
// .bottom{
//   height: 10px;
// }
.left-side {
  margin-top: -30px;
  flex-basis: 220px;
  border-right: 1px solid rgba(113 119 144 / 25%);
  padding: 26px;
  overflow: auto;
  flex-shrink: 0;
  color: #515253;
  background-color: rgb(255, 255, 255);
  @media screen and (max-width: 945px) {
    display: none;
  }
}
.side-wrapper + .side-wrapper {
  margin-top: 10px;
}

.side-title {
  color: rgb(67, 86, 163);
  margin-bottom: 10px;
  margin-left: 0px;
  font-size: 16px;
  margin-top: 30px;
}

.side-menu {
  display: flex;
  flex-direction: column;
  white-space: nowrap;
  margin-left: 20px;

  a {
    text-decoration: none;
    color: #0a0a0a;
    display: flex;
    align-items: center;
    font-weight: 400;
    padding: 10px;
    font-size: 14px;
    border-radius: 6px;
    transition: 0.3s;
    width: 150px;

    &:hover {
      background-color: rgba(9, 16, 39, 0.3);
    }
    &.active {
      color: #f9f6fa;
      background-color: #0f3fce;
    }
  }

  img {
    width: 16px;
    margin-right: 8px;
  }
}

.updates {
  position: relative;
  top: 0;
  right: 0;
  margin-left: auto;
  width: 18px;
  height: 18px;
  font-size: 11px;
}
</style>